<template>
    <div>
        <div class="header">
            <div class="adapt-pc nav">
                <div style="display:flex;justify-content: space-between;">
                    <a href="javascript:;">
                        <img class="logo" src="@/assets/image/logo.jpg"/>
                    </a>
                    <div class="tel-box">
                        <i class="icon-wuuicondianhua"></i>
                        <span><b>0532-8861-9019</b><br>7×24 移民咨询服务热线</span>
                    </div>
                </div>
            </div>
            <div class="h-menu">
                <div class="inner nav" >
                    <div @mouseenter="hideList()"><router-link to="/" style="color:#fff;">首页</router-link></div>
                    <!--<div @click.stop="getCountryList(0)">热门地区</div>-->
                    <div  v-for="item in allList" @mouseenter.stop="getCountryList(item.continent.id)">{{item.continent.name}}</div>
                    <div @mouseenter="hideList()" class="abuouts">
                        <router-link to="House" style="color:#fff;">海外房产</router-link>
                        <div  class="modelhide">
                            <div v-for="(it,index) in houseList" :key="index" class="nav-mo">
                                <router-link :to="{path:'/House',query:{id:it.id}}" style="font-size:16px;margin:10px 0;">{{it.name}}</router-link>
                            </div >
                        </div>
                    </div>
                    <div @mouseenter="hideList()" style="">
                        <router-link to="news" style="color:#fff;">资讯</router-link>
                    </div>
                    <div @mouseenter="hideList()" style="" class="abuouts">
                        关于希美邻
                        <div class="modelhide">
                            <div class="nav-mo"><router-link to="aboutus" style="font-size:16px;margin:10px 0;">关于我们</router-link></div>
                            <div class="nav-mo"><router-link to="contact" style="font-size:16px;margin:10px 0;">联系我们</router-link></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- PC 大洲对应的国家 -->
            <div class="dl opensss" ref="drop" v-show="allcountryShow" @mouseleave.stop="hideList()">
                <div>
                    <dl>
                        <!--<span>{{item.continent.name}}</span>-->
                        <dd v-for="(item,index) in countryListAll" :key="index">
                            <router-link :to="{path:'/Project',query:{id:item.id}}">
                                <img :src="getImage(item.icon)"/>
                                {{item.name}}
                            </router-link>
                        </dd>
                    </dl>
                </div>
            </div>
            <div class="adapt-m" style="">
                <div>
                    <router-link to="/" style="color:#fff;">
                        <img src="@/assets/image/logo.jpg" style="width:130px;height:auto;"/>
                    </router-link>
                </div>
                <div>
                    <i class="icon-sangang menu" @click="showNenu"></i>
                    <a href="tel:0532-8861-9019" rel="nofollow"><i class="icon-wuuicondianhua"></i></a>
                </div>
            </div>
        </div>
        <!-- =============================== 移动端左侧边栏 ============================== -->
        <div class="sidebanner" v-if="phoneMenu">
            <div class="ntwo" href="">
                <router-link to="/">
                    <img src="@/assets/image/logo.jpg" style="width:130px;height:auto;"/>
                </router-link>
                <img class="nav-cuo" alt="" src="@/assets/image/close0.png" @click="closeMenu" style="    width: 24px;">
            </div>

            <div class="content">
                <ul>
                    <li class="">
                        <i class="icon-Shape">
                            <img alt="" src="@/assets/image/app-icon1.png"  style="width: 20px;">
                        </i>
                        <block @click="hideList()">
                            <router-link class="a" to="/">首页</router-link>
                        </block>
                    </li>
                    <li :class="btnShow ? 'opens' : ''" @click.stop="btnClick">
                        <a class="a icon-pull-bottom" href="javascript:;">
                            <i class="icon-guoqi">
                                <img alt="" src="@/assets/image/app-icon2.png"  style="width: 18px;">
                            </i>
                            国家
                        </a>
                        <dl>
                            <block  @click="hideList()">
                                <router-link v-for="(item,index) in countryList" :key="index" :to="{path:'/Project',query:{id:item.id}}">
                                    {{item.name}}
                                </router-link>
                            </block>
                        </dl>
                    </li>
                    <!-- <li class="">
                        <i class="icon-Fill"></i>
                        <a class="a">精选移民项目</a>
                    </li> -->
                    <li class="">
                        <i class="icon-tubiao-">
                            <img alt="" src="@/assets/image/app-icon3.png"  style="width: 22px;">
                        </i>
                        <block @click="hideList()">
                            <router-link to="House" class="a">热门房产</router-link>
                        </block>
                    </li>
                    <li class="">
                        <i class="icon-Fill1">
                            <img alt="" src="@/assets/image/app-icon4.png"  style="width: 20px;">
                        </i>
                        <block @click="hideList"><router-link to="aboutus" class="a">关于我们</router-link></block>
                    </li>
                </ul>

                <div class="nav-bottom">
                    <div class="tel-box">
                        <span><a href="tel:0532-8861-9019"><b>0532-8861-9019</b></a><br>7×24 移民咨询服务热线</span>
                    </div>
                </div>
            </div>
        </div>
        <i class="close-nav"></i>
        <!-- ================================= 右边框 ================================== -->
        <div class="right-fax adapt-pc">
                <!-- <a target="_blank" href="evaluate" class="">
                    <div class="box">
                        <img src="@/assets/image/4.svg" alt="">
                        <p>快速评估</p>
                    </div>
                </a> -->
                <router-link :to="{path:'/evaluate'}">
                    <div class="box">
                        <img src="@/assets/image/4.svg" alt="">
                        <p>快速评估</p>
                    </div>
                </router-link>
                <!-- <a target="_blank" href="Score1.html" class="">
                    <div class="box" style="height: 70px;">
                        <img src="" alt="" width="20">
                        <span>在线打分</span>
                    </div>
                </a> -->
                <div class="box b4">
                    <i class="icon-wuuicondianhua"></i>
                    <p>立即回电</p>
                    <div class="img img4" style="top: 88px;">
                        <input type="number" value="" placeholder=" 输入电话" v-model="contactsPhone">
                        <span class="er1 icon-tanhao-copy"></span>
                        <a class="bot2" @click="save" style="background: #006C2E;">立即回电</a>
                        <div style="position: absolute;top: 105px;left:20px">
                            <p style="color:#000;">7*24小时服务热线</p>
                            <p style="color:#000;">0532-8861-9019</p>
                        </div>
                    </div>
                </div>
                <!-- <div class="box b5">
                    <img style="width:25px;height:25px;" src="" alt="">
                    <a href="javascript:;" class="">微信咨询</a>
                    <img class="img img5" src="" alt="" style="top:223px;">
                </div> -->
                <div class="box b3">
                    <img src="@/assets/image/2.svg" alt="">
                    <p>微信扫码</p>
                    <div class=" img img3" style="top:170px;background: #fff;
    height: 154px;">
                        <img  src="@/assets/picture/jiade-qrcode.jpg" alt="" style="width:100%;height:100%;padding:10px;">
                    </div>
                    
                </div>
                <!-- <div class="box b5">
                    <img src="/Public/Home/right/2.svg" alt="">
                    <a href="javascript:;" class="">微信咨询</a>
                    <img class=" img img5" src="/Public/Home/right/3.png" alt="" style="top:213px;">
                </div> -->
                <div class="box" @click="backTop">
                    <img src="@/assets/image/5.svg" alt="">
                    <p>返回顶部</p>
                </div>

            </div>
            <div class="click-box" v-if="promptshow">
                <div>
                    <img src="@/assets/image/success.png" alt="" class="dui">
                    <img src="@/assets/image/close.png" alt="" class="cuo xxx" @click="close">
                    <span>您的私人规划师会在2小时内跟您沟通～</span>
                    <p>我们会对您的电话严格保密，请保持电话畅通。<br/>公休假日可能会顺延，请您耐心等候。</p>
                    <em class="xxx" @click="konwbtn">我知道了</em>
                </div>
            </div>
    </div>
</template>

<script>
  import httpApi from '@/api/index'
  import { mapGetters } from 'vuex'
  export default {
    props: ['allList', 'countryList', 'houseList'],
    data() {
        return {
            allcountryShow:false,
            phoneMenu:false,
            countryListAll: [], //获取对应的房产
            btnShow: false,
            contactsPhone:'',
            promptshow:false,
        }
    },
    mounted() {
        document.addEventListener('click', this.clickOut);
    },
    computed: {
      ...mapGetters([ 'baseApi' ]),
    },
    methods: {
        save(){
            if (!/^1[0-9]{10}$/.test(this.contactsPhone)){
               return this.$message.error( '请输入手机号')
            }
            httpApi.apply({
                contacts:'未知',
                contactsPhone:this.contactsPhone,
            }).then(res => {
                if (res.success) {
                    this.promptshow = true
                    this.$message.success('保存成功')
                    
                }
            })
        },
        konwbtn(){
            this.promptshow = false
            this.$router.go(-1)
        },
        close(){
            this.promptshow = false
        },
        getImage(url){
            return this.baseApi + url;
        },
        // 当点击菜单以外的区域隐藏菜单
        clickOut(e) {
            let drop = this.$refs.drop
            if (drop && !drop.contains(e.target) && this.allcountryShow) {
                this.allcountryShow = false
            }
        },
        hideList() {
            this.allcountryShow = false;
            this.phoneMenu = false;
        },
        btnClick() {
            this.btnShow ? this.btnShow = false : this.btnShow = true;
        },
        showAll(){
            this.allcountryShow = !this.allcountryShow
        },
        showNenu(){
            this.phoneMenu = true
        },
        closeMenu(){
            this.phoneMenu = false
        },
        showText() {
            this.allcountryShow = true
        },
        backTop(){
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        },

        getCountryList(id) {
            this.countryListAll = [];
            this.allList.forEach(item => {
                if(id == item.continent.id){
                    this.countryListAll = item.countryList;
                    this.allcountryShow = true;
                }
            });
        },
        gotocountry(it){
            this.$router.push({ 
                name: '/Project',
                query: { id: it.id }
            },() =>{})
            this.phoneMenu = false;
        }
        
    },
    name: "PageHeader"
  }
</script>

<style>

@media(max-width: 1080px){
   .search-header .center form .input-search{width: 90px;}
}
@media(max-width: 960px){
    .search-header{display: none;}
}
/* .content-main{
    height: 430px;
} */
.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-container .swiper-slide {
    text-align: center;
    font-size: 18px;
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-container .swiper-slide img{
    width:100%;
    height: 100%;
    object-fit: cover;
}

.content-swiper>.swiper-pagination {
    bottom: 147px;
    width: 960px;
    left: 50%;
    margin-left: -480px;
    text-align: left;
}

.content-swiper>.swiper-pagination .swiper-pagination-bullet {
    width: 60px;
    height: 2px;
    border-radius: 1px !important;
}

.swiper-pagination-bullet:first-child {
    margin-left: 0 !important;
}

@media only screen and (max-width: 960px) {
    .content-swiper>.swiper-pagination {
        bottom: 10px;
        width: 100%;
        left: 0;
        margin-left: 20px;
        text-align: left;
    }
}

/*友情链接*/

.media {
    height: auto;
    overflow: hidden;
    padding:0;
    width: 82%;
    margin-left:18.5%;
    background: none;
}

.media_c {
    width: 100%;
    margin: 0 auto;
}

.media .f_t {
    color: #565a5c;
    font-size: 14px;
    overflow: hidden;
}

.media span {
    float: left;
    margin-right: 20px;
}

.media a {
    float: left;
    margin-right: 40px;
    font-size: 14px;
    color: #82888a;
}

.media a:hover {
    color: #006C2E;
}
</style>
<style lang="scss" scoped>
.abuouts{
    position: relative;
    height: 60px;
    line-height: 60px;
}
.abuouts:hover{
    .modelhide{
        display: block;
    }
}
.modelhide{
    background:#fff;
    box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 59px;z-index:9;
    padding:10px;width:100px;
    left:-10px;text-align: center;
    display: none;
    .nav-mo{
        margin:5px 0px 0px 0;height:30px;
        line-height: 30px;
    }
}
.search-header{
    background: #f5f5f5;padding: 10px 0;
    .center{
        margin: 0 auto;width: 90%;color: #bbb;
        span{margin-right: 20px;color: #bbb;}
        form{
            display: inline-block;
            float: right;
            position: relative;
            top: -5px;
            margin-right: 30px;
            .btn-search{
                background: #006C2E;
                display: inline-block;
                border: none;
                color: #fff;
                padding: 0px 10px;
                height: 28px;
                line-height: 28px;
                border-radius: 4px;
                width: auto;
                font-size: 14px;
                margin-left: 10px;
            }
            .input-search{
                background:none;
                border:1px solid #ddd;
                display: inline-block;
                line-height: 28px;height: 28px;
                padding: 0 10px;border-radius: 4px;
                width: 160px;
            }
        }
    }
}
.content{
    background-color: rgba(255, 255, 255, 0.95);
    width: 425px;
    // border: 1px solid #000000;
    border-radius: 6px;
    padding: 10px;
    margin-top: 16%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-bottom: 30px;
    font-size: 20px;
    position: relative;
    form{
        font-size: 0;
    }
    .close{
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 24px;
        cursor: pointer;
    }
}
.login-header{
    width: 100%;
    height: 48px;
    margin-bottom: 0px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    img{
        width: 120px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}
.login-input-box{
    margin-top: 12px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    font-size: 0;
    line-height: 0;
    margin-bottom: 10px;
    input{
        width: 370px;
        height: 32px;
        margin-left: 18px;
        border: 1px solid #dcdcdc;
        border-radius: 4px;
        padding-left: 12px;
        outline: none;
    }
    input:hover{
        border: 1px solid #ff7d0a;
    }
    input:after{
        border: 1px solid #ff7d0a;
    }
    .icon{
        width: 24px;
        height: 24px;
        margin: 6px 4px 6px 24px;
        background-color: #ff7d0a;
        display: inline-block;
        position: absolute;
        border-right: 1px solid #dcdcdc;
    }
}
.remember-box{
    width: auto;
    height: auto;
    margin-right: 18px;
    margin-top: 0px;
    font-size: 12px;
    color: #6a6765;
     text-align: right;
}

.login-button-box{
    margin-top: 12px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    font-size: 20px;
    button{
        background-color: #006C2E;
        color: #ffffff;
        font-size: 16px;
        width: 370px;
        height: 40px;
        margin-left: 18px;
        border: 1px solid #ff7d0a;
        border-radius: 4px;
        outline: none;
    }
    button:hover{
        background-color: #f74a4a;
    }
    button:active{
        background-color:#f74a4a;
    }
}
.logon-box{
    margin-top: 20px;
    text-align: center;
    a{
        margin: 30px;
        color: #4a4744;
        font-size: 13px;
        text-decoration: none;
    }
    a:hover{
        color: #ff7d0a;
    }
    a:active{
        color: #ee7204;
    }
}
.login-box{
	background: rgba(0,0,0,0.8);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 999999;
}
</style>